<template>
  <div class="domain-music" v-if="_isMobile()">
    <!--音乐盒子 -->
    <div class="music-box">
      <!--播放进度条 -->
      <div class="music-progress">
        <div class="music-progress-range" @click="onSliderClick">
          <div class="music-progress-bar" :style="'right: '+(100-player.progress)+'%; padding-right: '+player.progress+'px;'">
              <div class="music-progress-btn" :style="'margin-left: '+-(player.progress)+'px;'" @mousedown="progressInputHandler">{{covertTime(player.currentDuration)+'/'+covertTime(player.duration)}}</div>
          </div>
        </div>
      </div>
      <!--音乐台控制区域 -->
      <div class="music-station">
        <!--歌曲信息 -->
        <div class="music">
          <img
            class="transitive-image"
            :src="playerListConfig.cureentPlayAudio.songCover"
          />
          <div class="music-info">
            <div>{{playerListConfig.cureentPlayAudio.songName}}</div>
            <div>{{playerListConfig.cureentPlayAudio.singer}}</div>
          </div>
        </div>
        <!--播放器控制 -->
        <div class="music-control">
          <div class="pdd-step-backward prev" title="上一首" @click="perPlayer"></div>
          <div
            v-if="player.play==0"
            class="pdd-play-circle-fill player-btn"
            @click="Play"
            title="播放"
          ></div>
          <div v-else class="pdd-poweroff-circle-fill player-btn" @click="Pause" title="暂停"></div>
          <div class="pdd-step-forward next" title="下一首" @click="nextPlayer"></div>
        </div>
        <!--音量调节 -->
        <div class="tunings">
          <div v-if="player.mute==1" class="pdd-audiostatic audio" @click="musicMute(0)" title="音量"></div>
          <div v-else class="pdd-audio audio" @click="musicMute(1)" title="音量"></div>
          <div class="volume" style="width:120px;vertical-align: text-top;">
            <el-slider v-model="player.volume" @change="Modifyvolume"></el-slider>
          </div>
          <div class="pdd-translate lyrics" v-popover:lyrics title="歌词"></div>
          <div class="pdd-detail-fill music-list" v-popover:playlist title="播放列表"></div>
        </div>
      </div>
    </div>
    <!--音乐播放 -->
    <audio
      ref="audio"
      @play="onPlay"
      @timeupdate="onTimeupdate"
      @ended="onEnded"
      :src="playerListConfig.cureentPlayAudio.url"
    ></audio>
    <!-- 歌词 -->
    <el-popover ref="lyrics" popper-class="lyrics-box" placement="bottom" width="500" title="歌词" trigger="click">
      <div class="play-list-lyric">
        <p v-for="(item,index) in playerListConfig.cureentPlayAudio.lyrics" :key="index" :t="item.t" 
        :next="playerListConfig.cureentPlayAudio.lyrics[index+1]!=null&&playerListConfig.cureentPlayAudio.lyrics[index+1].t" 
        :class="player.currentDuration>item.t&&player.currentDuration<(playerListConfig.cureentPlayAudio.lyrics[index+1]!=null?playerListConfig.cureentPlayAudio.lyrics[index+1].t:999999999999999)?'lcrChange':''">
          {{item.c}}
        </p>
      </div>
    </el-popover>
    <!--播放列表 -->
    <el-popover ref="playlist" popper-class="playlist-box" placement="bottom" width="500" title="播放列表" trigger="click">
      <div class="play-list">
        <div class="table-container">
          <el-table :data="playerList" style="width: 100%" :show-header="false" :row-class-name="activeColumn" @cell-mouse-enter="playerListHover" @cell-mouse-leave="playerListHoverOut">
              <el-table-column :type="playerListConfig.table_01_type">
                <template slot-scope="scope">
                  <span v-if="player.hover===scope.row.id" class="pdd-step-forward player-list-operating" @click="playerListChange(scope.$index)"></span>
                  <span v-else  :class="player.active===scope.$index?'pdd-audio player-list-operating':''">{{player.active===scope.$index?'':scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="songName" show-overflow-tooltip></el-table-column>
              <el-table-column prop="singer" show-overflow-tooltip></el-table-column>
              <el-table-column prop="duration">
                <template slot-scope="scope">
                  <div class="player-list-operating" v-if="player.hover===scope.row.id"><span class="el-icon-download" @click="downloadMp3(scope.row.url)" title="下载"/> <span class="el-icon-delete-solid" @click="removePlayerItem(scope.$index)" title="移除"/></div>
                  <span v-else>{{covertTime(scope.row.duration)}}</span>
                  </template>
              </el-table-column>
          </el-table>
        </div>
        <div class="playlist-footer">
          <div class="count">共{{playerList.length}}首</div>
          <div style="float: right;margin-right: 15px;">
            <div class="clear">
              <el-button type="text" @click="clearPlayList" v-bind:disabled="playerList.length<1">清空</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import {fetch} from '../../utils/httpRequest'
import fileSave from 'file-saver'
export default {
  data() {
    return {
      player: {
        mute: 0,
        play: 0,
        volume: 50,
        progress: 0,
        duration: 0,
        currentDuration: 0,
        await: 0,
        hover:0,
        active:0
      },
      playerList: [],
      playerListConfig: {
        table_01_type: "index",
        cureentPlayAudio:{}
      }
    };
  },
  created(){
    this.getRecommentMusic();
  },
  methods: {
    //选择拖动点
    progressInputHandler(event) {
      this.player.await = 1;
      window.addEventListener("mousemove", this.onDragging, false);
      window.addEventListener("mouseup", this.onDraggingEnd, false);
    },
    //松开拖动点
    onDraggingEnd() {
      window.removeEventListener("mousemove", this.onDragging, false);
      this.player.await = 0;
      //设置播放点
      this.$refs.audio.currentTime =
        (this.player.duration * (this.player.progress / 100)) / 1000;
    },
    //进度条拖动定位播放进度
    onDragging(event) {
      this.PlayPoint(event);
      this.player.currentDuration =
        this.player.duration * (this.player.progress / 100);
    },
    //点击定位播放进度
    onSliderClick(event) {
      this.player.await = 1;
      this.PlayPoint(event);
      this.$refs.audio.currentTime = (this.player.duration * (this.player.progress / 100)) / 1000;
      this.player.await = 0;
    },
    //点击暂停
    Pause() {
      this.$refs.audio.pause();
      this.player.play = 0;
      this.$refs.audio.autoplay=false;
    },
    //点击播放
    Play() {
      this.$refs.audio.play();
      this.$refs.audio.autoplay=true;
    },
    //开始播放
    onPlay() {
      this.player.play = 1;
      this.$refs.audio.volume = this.player.volume / 100;
      this.player.duration = this.playerListConfig.cureentPlayAudio.duration;
    },
    //播放时间修改事件/播放中
    onTimeupdate(res) {
      var current = Math.ceil(this.$refs.audio.currentTime) * 1000;
      var duration = this.player.duration;
      //如果是正在调整播放进度中不动态的修改播放器的进度条
      if (this.player.await == 0) {
        this.player.currentDuration = this.$refs.audio.currentTime * 1000;
        this.player.progress = (current / duration) * 100;
      }
      //歌词滚动
      this.scrollToBottom();
    },
    //播放完毕
    onEnded() {
      this.nextPlayer();
    },
    //时间转换
    covertTime(ms) {
      if (ms.duration) {
        ms = ms.duration;
      }
      var min = Math.floor((ms / 1000 / 60) << 0);
      var sec = Math.floor((ms / 1000) % 60);
      return (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
    },
    //获取相对位置外x轴与浏览器左边边距
    getX(obj) {
      var parObj = obj;
      var left = obj.offsetLeft;
      while ((parObj = parObj.offsetParent)) {
        left += parObj.offsetLeft;
      }
      return left;
    },
    //定点播放
    PlayPoint(event) {
      var screen = document.getElementsByClassName("music-progress-range")[0];
      var point = event.clientX - this.getX(screen) - 10;
      var screenWidth = screen.clientWidth;
      if (point >= 0 && point <= screenWidth) {
        this.player.progress = Math.ceil((point / screenWidth) * 100);
      }
    },
    //调节音量
    Modifyvolume(index) {
      this.player.volume = index;
      this.$refs.audio.volume = index / 100;
    },
    //静音
    musicMute(stat) {
      if (stat == 1) {
        this.$refs.audio.volume = 0;
      } else {
        this.$refs.audio.volume = this.player.volume / 100;
      }
      this.player.mute = stat;
    },
    //清空
    clearPlayList() {
      this.playerList = [];
    },
    //播放选中
    activeColumn({row, rowIndex}){
      if(this.player.active==rowIndex){
        return "playerList-active";
      }
      return '';
    },
    //悬浮MP3
    playerListHover(row, column, cell, event){
      this.player.hover=row.id;
    },
    //取消悬浮MP3
    playerListHoverOut(row, column, cell, event){
      this.player.hover=0;
    },
    //下载
    downloadMp3(url){
      this.$notify.success({
        title: "系统通知",
        message: "下载功能优化中,暂不提供歌曲下载服务。"
      });
    },
    //播放
    playerListChange(index){
      this.player.active=index;
      this.playerListConfig.cureentPlayAudio=this.playerList[index];
    },
    //移除某首歌曲
    removePlayerItem(index){
      if(index===this.player.active){
        this.playerList.splice(index, 1)
        this.playerListConfig.cureentPlayAudio=this.playerList[index];
      }
    },
    //上一曲
    perPlayer(){
      var index=this.player.active-1;
      if(index<0){
        index=this.playerList.length-1;
      }
      this.player.active=index;
      this.playerListConfig.cureentPlayAudio=this.playerList[index];
      this.playerListConfig.cureentPlayAudio.lyrics=this.parseLrc(this.playerList[index].lyrics)
    },
    //下一曲
    nextPlayer(){
      var index=this.player.active+1;
      if(index>this.playerList.length-1){
        index=0;
      }
      this.player.active=index;
      this.playerListConfig.cureentPlayAudio=this.playerList[index];
       this.playerListConfig.cureentPlayAudio.lyrics=this.parseLrc(this.playerList[index].lyrics)
    },
    //加载推荐歌曲
    getRecommentMusic(){
      fetch(this.http.article_tourist.music.getRecommentMusic,{}).then((response)=>{
        if(response.success){
          this.playerList=response.data.records;
          this.player.active=0;
          this.playerListConfig.cureentPlayAudio=this.playerList[0];
          this.playerListConfig.cureentPlayAudio.lyrics=this.parseLrc(this.playerList[0].lyrics)
        }
      })
    },
    //解析歌词
    parseLrc(lrc){
      console.info("开始调用")
      if(lrc!==undefined){
        var medisArray = new Array();
        var medises = lrc.split("\n");
        for (var i = 0; i < medises.length; i++) {
          var t = medises[i].substring(medises[i].indexOf("[") + 1, medises[i].indexOf("]"));
          medisArray.push({
            t: parseFloat((parseInt(t.split(":")[0])*60 +parseInt(t.split(":")[1]))*1000)+parseFloat(t.split(".")[1]),
            c: medises[i].substring(medises[i].indexOf("]") + 1, medises[i].length)
          });
        }
        return medisArray;
      }
    },
    //滚动条锁定聊天记录底部
    scrollToBottom: function() {
      this.$nextTick(() => {
        var lyric=document.getElementsByClassName("play-list-lyric")[0];
        var lcrChange=document.getElementsByClassName("lcrChange")[0];
        if(lcrChange!==undefined){
          lyric.scrollTop = lcrChange.offsetTop-220;
        }
      });
    },
    //是否手机
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag==null;
    }
  }
};
</script>
<style scoped>
@media screen and (max-width: 500px){
  .music{
    width: 38% !important;
    text-align: left !important;
  }
  .music-control{
    width: 22% !important;
  }
  .tunings{
    width: 38% !important;
  }
}
.lcrChange{
  color: red;
}
.table-container::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
  border-radius: 100px;
}
.table-container::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.table-container{
  max-height: 400px;
  overflow-y: auto;
}
.tunings{
  vertical-align: middle;
}
.music-control div:nth-child(1),.music-control div:nth-child(3){
  vertical-align: super;
}
.music-control div:nth-child(2){
  font-size: 35px;
  vertical-align: baseline;
}
.player-list-operating,.player-list-operating span{
  cursor: pointer;
}
.player-list-operating{
  font-size: 20px;
}
.table-container >>> .playerList-active{
  color: #ff410f;
}
.table-container >>> .el-table td {
  text-align: center;
}
.playlist-footer .count,
.editList,
.clear {
  display: inline-block;
  margin: 15px 5px 5px 5px;
}
.play-list-lyric::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
  border-radius: 100px;
}
.play-list-lyric::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.play-list-lyric {
  height: 400px;
  overflow-y: auto;
  text-align: center;
}
.music-progress-range:hover {
  cursor: pointer;
}
.music-progress-btn {
    position: absolute;
    top: -9px;
    left: 100%;
    height: 20px;
    width: 100px;
    line-height: 20px;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    opacity: .7;
    box-shadow: 2px 2px 4px rgba(0,0,0,.4);
    text-align: center;
    z-index: 1;
    white-space: nowrap;
    cursor: pointer;
    
}
.music-progress-bar {
    position: absolute;
    left: 0;
    height: 100%;
    border-radius: 1px;
    background: linear-gradient(90deg,transparent,#ff410f);
    background-origin: content-box;
    right: 0%;
}
.music-progress-range {
  background-color: #e4e7ed;
  width: 100%;
  height: 2px;
}
.music-progress {
  width: 100%;
  position: relative;
}
.volume .el-slider {
  width: 90%;
  margin-right: 20px;
}
.volume .el-slider >>> .el-slider__button-wrapper {
  top: -16px;
}
.el-slider >>> .el-slider__runway {
  height: 3px;
  margin: 0;
}
.el-slider >>> .el-slider__bar {
  height: 3px;
  background-color: red;
}
.el-slider >>> .el-tooltip {
  border: 2px solid red;
  background-color: red;
  width: 10px;
  height: 10px;
}
.music,
.tunings {
  width: 40%;
  text-align: center;
}
.music-control {
  width: 18%;
  text-align: center;
  vertical-align: middle;
}
.prev,
.player-btn,
.next,
.audio,
.volume,
.lyrics,
.music-list {
  display: inline-block;
  font-size: 24px;
  color: red;
  cursor: pointer;
}
.music,
.music-control,
.tunings {
  display: inline-block;
}
.transitive-image {
  height: 70px;
  width: 70px;
  vertical-align: middle;
}
.music-station {
  height: 70px;
  max-width: 1000px;
  margin: 0px auto;
}
.music-info {
  display: inline-block;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  line-height: 25px;
}
.music-box {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  box-shadow: inset 0 1px 0 #f2f2f2;
  background: linear-gradient(to right,#3ABEB3,rgb(232, 239, 175));
  /* animation:music-box-hide 3s ease-in-out 0s 1 forwards;
  -webkit-animation:music-box-hide 3s ease-in-out 0s 1 forwards; */
}
.domain-music{
  height: 80px;
}
@keyframes music-box-hide
{
  from {bottom:0px;}
  to {bottom:-70px;}
}

@-webkit-keyframes music-box-hide
{
  from {bottom:0px;}
  to {bottom:-70px;}
}
@keyframes music-box-show
{
  from {bottom:-70px;}
  to {bottom:0px;}
}

@-webkit-keyframes music-box-show
{
  from {bottom:-70px;}
  to {bottom:0px;}
}
</style>
